<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>视频监控</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="./videojs/bin.css">
    <style>
        html,body,#container,.full{
            width: 100%;
            height: 100%;  
            position: relative;
            overflow: hidden;
            visibility:visible;
        }
        .col-cls{
            text-align: center;
            line-height: 32px;
        }
        .row-cls{
            margin-bottom: 10px;
        }
        video{
            object-fit: fill;
            width: 100%;
            height: 100%;
        }
        #videoContent{
            overflow: hidden;
            position: absolute;
            left: 0px;
            right:  0px;
            top:  0px;
            bottom:  0px;
        }
        #videoContent > div{
            float: left;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }
        .left-sider{
            position: absolute;
            left: 0;
            width: 300px;
            bottom: 0;
            top: 0;
            overflow: hidden;
        }
        .layui-elem-field {
            margin-bottom: 10px;
            padding: 0;
            border-width: 1px;
            border-style: solid;
        }
        fieldset {
            display: block;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            padding-block-start: 0.35em;
            padding-inline-start: 0.75em;
            padding-inline-end: 0.75em;
            padding-block-end: 0.625em;
            min-inline-size: min-content;
            border-width: 2px;
            border-style: groove;
            border-color: threedface;
            border-image: initial;
        }
        #videoContent .vjs-picture-in-picture-control{
            display: none;
        }

        .videoContent-1>div:first-child{
            width: 100%;
            height: 100%;
        }
        .videoContent-4>div{
            width: 50%;
            height: 50%;
        }

        .videoContent-6>div:first-child{
            width: 66.66%;
            height: 66.655%;
        }
        .videoContent-6>div{
            width: 33.33%;
            height: 33.33333% ;
        }

        .videoContent-8>div:first-child{
            width: 75%;
            height: 75%;
        }
        .videoContent-8>div{
            width: 25%;
            height: 25%;
        }

        .videoContent-9>div{
            width: 33.33%;
            height: 33.33%;
        }

        .videoContent-16>div{
            width: 25%;
            height: 25%;
        }
        .device-info-wrapper{
            background-color: #495060;
            height: 50px;
            padding-left: 10px;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: left;
            position: absolute;
            left: 0;
            width: 300px;
            height: 50px;
            top: 0px;
            color: #ffffff;
        }
        .tab-wrapper{
            position: absolute;
            left: 0;
            width: 300px;
            top: 50px;
            
        }
        .mask-wrapper{
            position: absolute;
            right: 0px;
            bottom: 0px;
            top: 55px;
            left: 0px;
            z-index: 9999;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loader-05 {
            width: 50px;
            height: 50px;
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            position: relative;
        }
        .loader-05:before {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -.2em;
            left: -.2em;
            border: .2em solid currentcolor;
            border-radius: 50%;
            opacity: .5;
        }

        @-webkit-keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes loader-05 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .text-tip{
            position: absolute;
            bottom: -25px;
            left: -20px;
            right: -20px;
            text-align: center;
        }
        .video-back{
            width: 80px;
            background-color: #495060;
            position: absolute;left: 10px;top: 0;height: 50px;
            cursor: pointer;
        }
        .video-dsm{
            width: 80px;
            position: absolute;left: 90px;top: 0;height: 50px;
            cursor: pointer;
        }
        .video-back .bg-img,.video-dsm .bg-img{
            height: 30px;
        }
        .video-back .bg-img>div{
            width: 30px;
            height: 30px;
            margin:2px auto;
            background-image: url('./videojs/images/videoback.png');
            background-size: cover;
        }
        .video-dsm .bg-img>div{
            width: 30px;
            height: 30px;
            margin:2px auto;
            background-image: url('./videojs/images/ai.png') ;
            background-size: cover;
        }
        .video-back:hover .bg-img>div,.video-dsm:hover .bg-img>div{
            background-image: url('./videojs/images/videoback_h.png');
        }
        .video-dsm:hover .bg-img>div,.video-dsm:hover .bg-img>div{
            background-image: url('./videojs/images/ai_h.png');
        }
        .video-back:hover .text,.video-dsm:hover .text{
            color: #1186DD;
        }
        .video-back .text,.video-dsm .text{
            height: 20px;
            line-height: 18px;
            text-align: center;
            color: #ffffff;
        }
        .video-back .bg-img,.video-dsm .bg-img{
            text-align: center;
        }
        .video-back .bg-img img,.video-dsm .bg-img img{
            border: 0;
            margin-top: 3px;
        }


    .blackBoxSpeak {
            width: 176px;
            height: 176px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* background: url("../../images/luyin/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
            url("../../images/luyin/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
            background: rgba(0, 0, 0, .7);
            /* display: none; */
            border-radius: 12px;
            z-index: 8888;
        }

    .img-box{
        position: absolute;
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 48px;
        display: flex;
        flex-direction: row;
    }  
    .img-box>div{
        width: 50%;
        padding: 10px;
    }
    .img-box>div:last-child{
    padding: 10px 20px;
    box-sizing: border-box;
    }

    .blackBoxSpeakConent {
            font: 14.4px '微软雅黑 Light';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            display: block;
            text-align: center;
            width: 90%;
            padding: 8px 0;
            margin: auto;
            color: #ffffff;
            font-weight: 200;
            border-radius: 4px;
        }
    .audioPlayerTip{
        height: 30px;
        line-height: 30px;
        background-color: rgba(0, 0, 0, .7);
        color: #ffffff;
        margin-top: 10px;
    }
    .ivu-row .ivu-input{
        color: #000;
    }
    </style>
    <link href="./videojs/video-js.css" rel="stylesheet">
    <script src="./videojs/video.js"></script>
    <script src="./videojs/videojs-flash.min.js"></script>

</head>
<body>

    <div class="mask-wrapper" id="mask-wrapper">
        <div class="box" style="position:relative;">
            <div class="loader-05"></div>
            <div class="text-tip">正在载入播放器</div>
        </div>
    </div>

    <div id="container">
        <Modal v-model="tipModal"  title="提示" width="300" :mask-closable="false">
            <div style="text-align:center">
                请安装flash或者允许网页flash播放
            </div>
            <div slot="footer" >
                <i-button style="width: 100%" @click="onClickTipBtn" type="primary">确定</i-button>
            </div>
        </Modal> 
        <div class="blackBoxSpeak" v-if="isLuyin">
            <div class='img-box'>
                <div>
                    <img src="./images/luyin/ic_record@2x.png" alt="" style='width:100%;height:100%'>
                </div>
                <div>
                    <img :src='imgSrc' style='width:100%;height:100%'>
                </div>
            </div>
            <div class="blackBoxSpeakConent">正在录音，请说话</div>
        </div>
        <Spin fix style="z-index:9999;" v-show="Spin"></Spin> 
                <div class="left-sider" style="background-color:#ffffff;">
                    <div class="full" style="position: relative;">
                       <div class="device-info-wrapper" v-text="devInfo">
                        
                       </div>
                       <div class="tab-wrapper">
                        <Tabs value="" :animated="false">
                            <Tab-Pane label="云台">
                                <div id="tab_state_1" class="tab_state_pane">
                                    <div class="state_1_yt" style="margin-left:15px">
                                        <div class="fl icon_yt_box">
                                            <a class="icon_yt_0" title=""></a>
                                            <a class="icon_yt_1" title=""></a>
                                            <a class="icon_yt_2" title=""></a>
                                            <a class="icon_yt_3" title=""></a>
                                            <a class="icon_yt_4" title=""></a>
                                            <a class="icon_yt_5" title=""></a>
                                            <a class="icon_yt_6" title=""></a>
                                            <a class="icon_yt_7" title=""></a>
                                            <a class="icon_yt_8" title=""></a>
                                            <div id="yt_handle" class="yt" style="margin:3px;">
                                                <Slider></Slider>
                                            </div>
                                        </div>
                                        <div class="fr yt_state2">
                                            <span>
                                                <a class="icon_f0_0" title=""></a>
                                                <a class="icon_f0_1" title=""></a>
                                            </span>
                                            <span>
                                                <a class="icon_y0_0" title=""></a>
                                                <a class="icon_y0_1" title=""></a>
                                            </span>
                                            <span>
                                                <a class="icon_k0_0" title=""></a>
                                                <a class="icon_k0_1" title=""></a>
                                            </span>
                                            <span>
                                                <a class="icon_light0_0" title=""></a>
                                                <a class="icon_biao0_1" title=""></a>
                                            </span>
                                        </div>
                                        <div class="spacer"></div>
                                    </div>
                                    <div class="yt_footer">
                                        <Row>
                                            <i-Col span="6" style="padding: 0 5px;">
                                                <Input-Number :max="1000" :min="1" style="width:60px;"></Input-Number>
                                            </i-Col>
                                            <i-Col span="6" style="padding: 0 5px;">
                                                <i-button style="width:100%;">调用</i-button>
                                            </i-Col>
                                            <i-Col span="6" style="padding: 0 5px;">
                                                <i-button style="width:100%;">设置</i-button>
                                            </i-Col>
                                            <i-Col span="6" style="padding: 0 5px;">
                                                <i-button style="width:100%;">删除</i-button>
                                            </i-Col>
                                        </Row>
                                    </div>
                                </div>
                            </Tab-Pane>      
                            <Tab-Pane label="色彩">
                                <Row class="state_color">
                                    <i-Col span="6" style="line-height:35px;">
                                        <i class="state_co_0" title="亮度"></i>
                                    </i-Col>
                                    <i-Col span="12">
                                        <Slider v-model="brightness" :min="0" :max="255"></Slider>
                                    </i-Col>
                                    <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                        <input v-model="brightness" name="" type="text">
                                    </i-Col>
                                </Row>
                                <Row class="state_color">
                                    <i-Col span="6" style="line-height:35px;">
                                        <i class="state_co_1" title="对比度"></i>
                                    </i-Col>
                                    <i-Col span="12">
                                        <Slider v-model="constract" :min="-127" :max="127"></Slider>
                                    </i-Col>
                                    <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                        <input v-model="constract" name="" type="text">
                                    </i-Col>
                                </Row>
                                <Row class="state_color">
                                    <i-Col span="6" style="line-height:35px;">
                                        <i class="state_co_2" title="色度"></i>
                                    </i-Col>
                                    <i-Col span="12">
                                        <Slider v-model="hue" :min="-127" :max="127"></Slider>
                                    </i-Col>
                                    <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                        <input v-model="hue" name="" type="text">
                                    </i-Col>
                                </Row>
                                <Row class="state_color">
                                    <i-Col span="6" style="line-height:35px;">
                                        <i class="state_co_3" title="饱和度"></i>
                                    </i-Col>
                                    <i-Col span="12">
                                        <Slider v-model="saturate" :min="0" :max="255"></Slider>
                                    </i-Col>
                                    <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                        <input v-model="saturate" name="" type="text">
                                    </i-Col>
                                </Row>
                                <Row class="state_color">
                                    <i-Col span="6" style="line-height:35px;">
                                        <i class="state_co_4" title="曝光"></i>
                                    </i-Col>
                                    <i-Col span="12">
                                        <Slider v-model="exposure" :min="0" :max="255"></Slider>
                                    </i-Col>
                                    <i-Col span="6" class="state_co_value" style="line-height:35px;height: 35px;">
                                        <input v-model="exposure" name="" type="text">
                                    </i-Col>
                                </Row>
                                <div class="yt_footer">
                                    <i-button style="width:120px;" @click="defaultQualityParams">默认</i-button>
                                </div>
                            </Tab-Pane>      
                            <Tab-Pane label="语音">
                                <div class="listing_choice">
                                    <Radio-Group v-model="listingChoice">
                                        <Radio label="duijiang"><span>对讲</span></Radio>
                                        <Radio label="jianting"><span>监听</span></Radio>
                                    </Radio-Group>
                                </div>
                                <div class="listing_box" v-if="listingChoice == 'duijiang'">
                                    <i class="icon_dj"></i>
                                    <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                    <div class="yt_footer">
                                        <div>
                                            <i-button style="width:120px;" @click="openDuijiang" :loading="loading">{{isOpenJianting?'关闭':'开启'}}</i-button>
                                        </div>
                                        <div @mousedown="onMousedown" style="margin-top:10px;">
                                            <i-button style="width:120px;">按住通话</i-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="listing_box" v-else>
                                    <i class="icon_jt"></i>
                                    <div class="audioPlayerTip">{{audioPlayerTip}}</div>
                                    <div class="yt_footer">
                                        <div>
                                            <i-button style="width:120px;" @click="openDuijiang" :loading="loading">{{isOpenJianting?'关闭':'开启'}}</i-button>
                                        </div>
                                    </div>
                                </div>
                            </Tab-Pane>      
                        </Tabs>
                        <div style="visibility: hidden;">
                            <div id="audio-wrap" ></div>
                        </div>
                       </div>
                    </div>
                </div>
                <div style="position: absolute; left: 300px;bottom: 0;right: 0;top: 0;">      
                    <div style="height:50px;line-height:50px;padding: 0 10px; position: absolute;left: 0;right: 0;top: 0;overflow: hidden;background-color: #495060;">
                        <div class="video-back" @click='videoBack'>
                            <div class="bg-img">
                                <!-- <img src="./videojs/images/videoback.png" width="30" height="30"> -->
                                <div></div>
                            </div>
                            <div class="text">录像回放</div>
                        </div>
                        <div :class="activeSafety?'video-dsm':''" @click='videoDsm' v-if="activeSafety">
                            <div class="bg-img">
                                <div></div>
                            </div>
                            <div class="text" v-text="activeSafetyStr"></div>
                        </div>
                        <div style="height: 100%;text-align: right;" class="tv_box">   
                                <span title="显示一个通道"><i class="icon icon_num1" @click="openAndCloseVideoWindows(1)"></i></span>
                                <span title="显示四个通道"><i class="icon icon_num2" @click="openAndCloseVideoWindows(4)"></i></span>
                                <span title="显示六个通道"><i class="icon icon_num3" @click="openAndCloseVideoWindows(6)"></i></span>
                                <span title="显示八个通道"><i class="icon icon_num4" @click="openAndCloseVideoWindows(8)"></i></span>
                                <span title="显示九个通道"><i class="icon icon_num5" @click="openAndCloseVideoWindows(9)"></i></span>
                                <span title="显示十六个通道"><i class="icon icon_num6" @click="openAndCloseVideoWindows(16)"></i></span>
                                <span id="box_viewSize" @click="handleFullScreen" title="全屏">
                                    <i class="icon icon_view"></i>
                                    <!-- <ul class="tc_box">
                                        <li id="liViewFull" @click="handleScreenSize(1)"><a id="viewFull">
                                            <i v-show="viewSize == 1" class="icon_select"></i>满画面显示</a></li>
                                        <li id="liView4X3" @click="handleScreenSize(2)"><a id="view4X3">
                                            <i class="icon_select" v-show="viewSize == 2"></i>4:3显示</a></li>
                                        <li id="liView16X9" @click="handleScreenSize(3)"><a id="view16X9">
                                            <i class="icon_select" v-show="viewSize == 3"></i>16:9显示</a></li>
                                    </ul> -->
                                </span>
                                <span  @click="handlePlayAllVideos" title="播放所有视频">
                                    <i class="icon icon_play_all"></i>
                                </span>
                                <span id="box_stop" @click="handleStopAllVideos" title="停止所有视频">
                                    <i class="icon icon_close_show"></i>
                                    <!-- <ul class="tc_box">
                                        <li @click="handleStopAllVideos"><a id="stopAll" ><i class="icon icon_gou"></i>停止所有视频</a></li>
                                    </ul> -->
                                </span>
                                <span @click="setupModal=true"><i class="icon icon_num9"  title="视频播放设置"></i></span>
                      
                        </div>
                        <Modal v-model="setupModal" width="800">
                                <p slot="header" style="color:#f60;text-align:center">
                                    <Icon type="ios-search-outline"></Icon>
                                    <span v-text="modalHader"></span> 
                                </p>
                                <Tabs value="" :animated="false">
                                    <Tab-Pane label="音视频参数" name="videoSetup">
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="24" style="height: 100%;line-height:32px;text-align: right;">
                                                <i-button type="info" @click="queryClientParameters">查询</i-button>
                                                <i-button type="primary" @click="setClientParameters">发送</i-button>
                                            </i-Col>
                                        </Row>   
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时流编码模式 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="realtimebitratemode">
                                                    <i-option value="0">CBR(固定码率)</i-option>
                                                    <i-option value="1">VBR(可变码率)</i-option>
                                                    <i-option value="2">ABR(平均码率)</i-option>
                                                </i-select>
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                存储流编码模式 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="storebitratemode">
                                                    <i-option value="0">CBR(固定码率)</i-option>
                                                    <i-option value="1">VBR(可变码率)</i-option>
                                                    <i-option value="2">ABR(平均码率)</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>   
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时流分辨率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="realtimeresolution">
                                                    <i-option value="0">QCIF</i-option>
                                                    <i-option value="1">CIF</i-option>
                                                    <i-option value="2">WCIF</i-option>
                                                    <i-option value="3">D1</i-option>
                                                    <i-option value="4">WD1</i-option>
                                                    <i-option value="5">720p</i-option>
                                                    <i-option value="6">1080p</i-option>
                                                </i-select>
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                存储流分辨率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select v-model="storeresolution">
                                                    <i-option value="0">QCIF</i-option>
                                                    <i-option value="1">CIF</i-option>
                                                    <i-option value="2">WCIF</i-option>
                                                    <i-option value="3">D1</i-option>
                                                    <i-option value="4">WD1</i-option>
                                                    <i-option value="5">720p</i-option>
                                                    <i-option value="6">1080p</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>   
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时流关键帧间隔 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="realtimekeyframeinterval"></Input-Number>
                                                范围1~1000
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                存储流关键帧间隔 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="storekeyframeinterval"></Input-Number>
                                                范围1~1000
                                            </i-Col>
                                        </Row>   
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时流目标帧率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="120" :min="1" v-model="realtimeframerate"></Input-Number>
                                                范围1~120 帧/秒
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                存储流目标帧率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="120" :min="1" v-model="storeframerate"></Input-Number>
                                                范围1~120 帧/秒
                                            </i-Col>
                                        </Row>   
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时流目标码率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="realtimeframebitrate"></Input-Number>
                                                kbps
                                            </i-Col>
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                存储流目标码率 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <Input-Number :max="1000" :min="1" v-model="storeframebitrate"></Input-Number>
                                                kbps
                                            </i-Col>
                                        </Row> 
                                        <hr/>  
                                        <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                            <legend style="margin-left:20px;">OSD 字幕叠加设置</legend>
                                            <Row style="height:32px;margin: 10px 0;">
                                                <i-Col span="24" style="height: 100%;line-height:32px;">
                                                    <checkbox-group v-model="videoCheckboxGroup">
                                                        <Checkbox label="dateandtime">
                                                            <span>日期和时间</span>
                                                        </Checkbox>
                                                        <Checkbox label="carnum">
                                                            <span>车牌号码</span>
                                                        </Checkbox>
                                                        <Checkbox label="channel">
                                                            <span>逻辑通道号</span>     
                                                        </Checkbox>
                                                        <Checkbox label="latlon">
                                                            <span>经纬度</span>   
                                                        </Checkbox>
                                                        <Checkbox label="recorderspeed">
                                                            <span>行驶记录速度</span>
                                                        </Checkbox>
                                                        <Checkbox label="gpsspeed">
                                                            <span>卫星定位速度</span>
                                                        </Checkbox>
                                                        <Checkbox label="drivingtime">
                                                            <span>连续驾驶时间</span>
                                                        </Checkbox>
                                                    </checkbox-group>
                                                </i-Col>
                                            </Row> 
                                        </fieldset>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                是否启用音频输出 :
                                            </i-Col>
                                            <i-Col span="7" style="height: 100%;line-height:32px;">
                                                <i-select placement="top" v-model="usingaudio">
                                                    <i-option value="1">启用</i-option>
                                                    <i-option value="0">不启用</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>
                                    </Tab-Pane>
                                    <Tab-Pane label="视频播放参数" name="videoPlay">
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                传输模式 :
                                            </i-Col>
                                            <i-Col span="12" style="height: 100%;line-height:32px;">
                                                <i-select v-model="videotranstype" style="width:300px">
                                                    <i-option value="0">TCP</i-option>
                                                    <i-option value="1">UDP</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                实时性 :
                                            </i-Col>
                                            <i-Col span="12" style="height: 100%;line-height:32px;">
                                                <i-select placement="top" v-model="videostreamtype" style="width:300px">
                                                    <i-option value="0">一般</i-option>
                                                    <i-option value="1">好</i-option>
                                                </i-select>
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                对讲通道 :
                                            </i-Col>
                                            <i-Col span="12" style="height: 100%;line-height:32px;">
                                                <i-input v-model="audiochannel" style="width:300px"></i-input>
                                            </i-Col>
                                        </Row>
                                        <Row style="height:32px;margin: 10px 0;">
                                            <i-Col span="17" style="height: 100%;line-height:32px;text-align: center;">
                                                <i-button type='primary' @click='handleSetPlayParamter'>设置播放视频参数</i-button>
                                            </i-Col>
                                        </Row>
                                    </Tab-Pane>
                                    <Tab-Pane label="单独通道视频参数" name="aloneVideoSetup">
                                        <i-button type="info" @click="querySingleAudioVideoParameters" style="width:180px;margin-bottom:10px;">查询</i-button>
                                        <Tabs value="" :animated="false" type="card">
                                            <Tab-Pane :label="item.channelnum" v-for="(item,index) in channelsData" :key="index">  
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            实时流编码模式 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <i-select v-model="item.realtimebitratemode">
                                                                <i-option value="0">CBR(固定码率)</i-option>
                                                                <i-option value="1">VBR(可变码率)</i-option>
                                                                <i-option value="2">ABR(平均码率)</i-option>
                                                            </i-select>
                                                        </i-Col>
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            存储流编码模式 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <i-select v-model="item.storebitratemode">
                                                                <i-option value="0">CBR(固定码率)</i-option>
                                                                <i-option value="1">VBR(可变码率)</i-option>
                                                                <i-option value="2">ABR(平均码率)</i-option>
                                                            </i-select>
                                                        </i-Col>
                                                    </Row>   
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            实时流分辨率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <i-select v-model="item.realtimeresolution">
                                                                <i-option value="0">QCIF</i-option>
                                                                <i-option value="1">CIF</i-option>
                                                                <i-option value="2">WCIF</i-option>
                                                                <i-option value="3">D1</i-option>
                                                                <i-option value="4">WD1</i-option>
                                                                <i-option value="5">720p</i-option>
                                                                <i-option value="6">1080p</i-option>
                                                            </i-select>
                                                        </i-Col>
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            存储流分辨率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <i-select v-model="item.storeresolution">
                                                                <i-option value="0">QCIF</i-option>
                                                                <i-option value="1">CIF</i-option>
                                                                <i-option value="2">WCIF</i-option>
                                                                <i-option value="3">D1</i-option>
                                                                <i-option value="4">WD1</i-option>
                                                                <i-option value="5">720p</i-option>
                                                                <i-option value="6">1080p</i-option>
                                                            </i-select>
                                                        </i-Col>
                                                    </Row>   
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            实时流关键帧间隔 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="1000" :min="1" v-model="item.realtimekeyframeinterval"></Input-Number>
                                                            范围1~1000
                                                        </i-Col>
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            存储流关键帧间隔 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="1000" :min="1" v-model="item.storekeyframeinterval"></Input-Number>
                                                            范围1~1000
                                                        </i-Col>
                                                    </Row>   
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            实时流目标帧率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="120" :min="1" v-model="item.realtimeframerate"></Input-Number>
                                                            范围1~120 帧/秒
                                                        </i-Col>
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            存储流目标帧率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="120" :min="1" v-model="item.storeframerate"></Input-Number>
                                                            范围1~120 帧/秒
                                                        </i-Col>
                                                    </Row>   
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            实时流目标码率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="1000" :min="1" v-model="item.realtimeframebitrate"></Input-Number>
                                                            kbps
                                                        </i-Col>
                                                        <i-Col span="5" style="height: 100%;line-height:32px;text-align: center;">
                                                            存储流目标码率 :
                                                        </i-Col>
                                                        <i-Col span="7" style="height: 100%;line-height:32px;">
                                                            <Input-Number :max="1000" :min="1" v-model="item.storeframebitrate"></Input-Number>
                                                            kbps
                                                        </i-Col>
                                                    </Row> 
                                                    <hr/>  
                                                    <fieldset class="layui-elem-field fieldset" style="margin-top:5px;padding-left: 10px;">
                                                        <legend style="margin-left:20px;">OSD 字幕叠加设置</legend>
                                                        <Row style="height:32px;margin: 10px 0;">
                                                            <i-Col span="24" style="height: 100%;line-height:32px;">
                                                                <checkbox-group v-model="item.videoCheckboxGroup">
                                                                    <Checkbox label="dateandtime">
                                                                        <span>日期和时间</span>
                                                                    </Checkbox>
                                                                    <Checkbox label="carnum">
                                                                        <span>车牌号码</span>
                                                                    </Checkbox>
                                                                    <Checkbox label="channel">
                                                                        <span>逻辑通道号</span>     
                                                                    </Checkbox>
                                                                    <Checkbox label="latlon">
                                                                        <span>经纬度</span>
                                                                    </Checkbox>
                                                                    <Checkbox label="recorderspeed">
                                                                        <span>行驶记录速度</span>
                                                                    </Checkbox>
                                                                    <Checkbox label="gpsspeed">
                                                                        <span>卫星定位速度</span>
                                                                    </Checkbox>
                                                                    <Checkbox label="drivingtime">
                                                                        <span>连续驾驶时间</span>
                                                                    </Checkbox>
                                                                </checkbox-group>
                                                            </i-Col>
                                                        </Row> 
                                                    </fieldset>
                                                    <Row style="height:32px;margin: 10px 0;">
                                                        <i-Col span="24" style="height:100%;line-height:32px;text-align:center;">
                                                            <i-button style="width:200px;" type="primary" @click="setSingleAudioVideoParameters(index)">发送</i-button>
                                                        </i-Col>
                                                    </Row> 
                                                </Tab-Pane>
                                        </Tabs>
                                    </Tab-Pane>
                                    <Tab-Pane label="音视频终端属性" name="videoProperty">
                                            <Row style="height:32px;margin: 10px 0;">
                                                <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                                    <i-button @click="queryVideoProperty" style="width:120px;" type="primary">查询</i-button>
                                                </i-Col>
                                            </Row> 
                                            <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频编码方式 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiocodec}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频编码方式字符 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiocodecstr}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频声道数 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiochannelcount}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频采样位数 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiosamplebits}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">音频帧长度 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audioframelength}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">是否支持音频输出 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiooutputsupport}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">视频编码方式 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.videocodec}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">视频编码方式字符 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.videocodecstr}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">终端支持最大音频物理通道数 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.audiomaxsupport}}
                                                    </i-Col>
                                                </Row>
                                                <Row style="height:32px;">
                                                    <i-Col span="8" style="height: 100%;text-align:right;line-height:32px;">终端支持最大视频物理通道数 : &nbsp;</i-Col>
                                                    <i-Col span="16" style="height: 100%;line-height:32px;">
                                                        {{videoProperty.videomaxsupport}}
                                                    </i-Col>
                                                </Row>   
                                        </Tab-Pane>
                                        <Tab-Pane label="音视频通道列表" name="videoChannelsList">
                                            <Row style="height:32px;margin: 10px 0;">
                                                <i-Col span="7" offset="7" style="height: 100%;line-height:32px;">
                                                    <i-button @click="queryVideoChannels" style="width:120px;" type="primary">查询</i-button>
                                                </i-Col>
                                            </Row>   
                                            <i-table border 
                                                ref="table"
                                                :columns="columns"
                                                :data="tableData"
                                                height="234"
                                                :loading="loading"></i-table>    
                                        </Tab-Pane>                                 
                                        <Tab-Pane label="主动安全外设" name="activeSecurityPeripheral">
                                            <Tabs type="card" :animated="false">
                                                <Tab-Pane label="高级驾驶辅助" name="activeSecurityPeripheral1">  
                                                    <Row>
                                                        <i-col span="6">
                                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('adas')">查询</i-button>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col :span="3">
                                                           公司名称:
                                                        </i-col>
                                                        <i-col :span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.companyname" disabled style="color:#000"></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            产品型号:
                                                        </i-col>
                                                        <i-col :span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.modelname" disabled style="color:#000"></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.hardwareversion" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            软件版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.softwareversion" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备ID:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.exdeviceid" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            客户代码:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceAdas.customcode" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                </Tab-Pane>
                                                <Tab-Pane label="驾驶员状态监测" name="activeSecurityPeripheral2">
                                                    <row>
                                                        <i-col span="6">
                                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('dsm')">查询</i-button>
                                                        </i-col>
                                                    </row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                           公司名称:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.companyname" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            产品型号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.modelname" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.hardwareversion" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            软件版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.softwareversion" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备ID:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.exdeviceid" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            客户代码:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceDsm.customcode" disabled></i-input>
                                                        </i-col>
                                                    </Row>    
                                                </Tab-Pane>
                                                <Tab-Pane label="轮胎气压监测" name="activeSecurityPeripheral3">                                                  
                                                    <row>
                                                        <i-col span="6">
                                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('tpms')">查询</i-button>
                                                        </i-col>
                                                    </row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                           公司名称:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.companyname" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            产品型号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.modelname" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.hardwareversion" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            软件版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.softwareversion" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备ID:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.exdeviceid" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            客户代码:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceTpms.customcode" disabled></i-input>
                                                        </i-col>
                                                    </Row>    
                                                </Tab-Pane>
                                                <Tab-Pane label="盲点监测" name="activeSecurityPeripheral4">
                                                    <row>
                                                        <i-col span="6">
                                                            <i-button type="primary" @click="queryActiveSafetyDeviceInfo('bsd')">查询</i-button>
                                                        </i-col>
                                                    </row>
                                                    <Row style="line-height:32px;">
                                                        <i-col span="3">
                                                           公司名称:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.companyname" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            产品型号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.modelname" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.hardwareversion" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            软件版本号:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.softwareversion" disabled></i-input>
                                                        </i-col>
                                                    </Row>
                                                    <Row style="line-height:32px">
                                                        <i-col span="3">
                                                            设备ID:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.exdeviceid" disabled></i-input>
                                                        </i-col>
                                                        <i-col span="3" offset="2">
                                                            客户代码:
                                                        </i-col>
                                                        <i-col span="8">
                                                            <i-input v-model.trim="safetyDeviceBsd.customcode" disabled></i-input>
                                                        </i-col>
                                                    </Row>  
                                                </Tab-Pane>
                                            </Tabs> 
                                        </Tab-Pane>                                 
                                </Tabs>
                                <div slot="footer" style="padding:10px;"></div>
                            </Modal>         
                    </div>
                    <div style="position: absolute;left: 0;right: 0;top: 50px;bottom: 0;padding: 10px">
                        <div class="full">
                            <div id="videoContent" ref="videoContent" class="full">
                                <!-- <div v-for="(item , index) in videoNumber" :key="index">
                                    <video :id="'video'+index" class="video-js" controls poster="" >  
                                </div> -->
                            </div>                                 
                        </div>
                    </div>
                        
                </div>
         

    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/lame.min.js"></script>
    <script>

(function (window) {
    //兼容
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
    var HZRecorder = function (stream, config) {
        config = config || {};
        config.sampleBits = config.sampleBits || 8;      //采样数位 8, 16
        config.sampleRate = config.sampleRate || (44100 / 6);   //采样率(1/6 44100)
 
        var context = new (window.webkitAudioContext || window.AudioContext)();
        var audioInput = context.createMediaStreamSource(stream);
        var createScript = context.createScriptProcessor || context.createJavaScriptNode;
        var recorder = createScript.apply(context, [16384, 1, 1]);
        lame = new lamejs();
        mp3Encoder = new lame.Mp3Encoder(1, config.sampleRate || 44100, config.sampleBits || 128);


        var floatTo16BitPCM = function (input, output) {
            for (var i = 0; i < input.length; i++) {
                var s = Math.max(-1, Math.min(1, input[i]));
                output[i] = (s < 0 ? s * 0x8000 : s * 0x7FFF);
            }
        };

        var convertBuffer = function (arrayBuffer) {
            var data = new Float32Array(arrayBuffer);
            var out = new Int16Array(arrayBuffer.length);
            floatTo16BitPCM(data, out);
            return out;
        };

        var encode = function (arrayBuffer) {
            var transformData = [];
            var maxSamples = 1152;
            var samplesMono = convertBuffer(arrayBuffer);
            var remaining = samplesMono.length;
            for (var i = 0; remaining >= 0; i += maxSamples) {
                var left = samplesMono.subarray(i, i + maxSamples);
                var mp3buf = mp3Encoder.encodeBuffer(left);
                transformData.push(mp3buf);
                remaining -= maxSamples;
            }
            // transformData.push(mp3Encoder.flush());
            return transformData;
        };
        var audioData = {
            size: 0          //录音文件长度
            , buffer: []     //录音缓存
            , callback:config.callback
            , inputSampleRate: context.sampleRate    //输入采样率
            , inputSampleBits: 16       //输入采样数位 8, 16
            , outputSampleRate: config.sampleRate    //输出采样率
            , oututSampleBits: config.sampleBits       //输出采样数位 8, 16
            , input: function (data) {
                //this.buffer = [];
               // this.buffer.push(new Float32Array(data));
               this.buffer = data;
                //this.buffer = new Float32Array(data);
                this.size += data.length;
                this.encodeMP3();
                
            },encodeMP3: function () {
                var that = this;
                var mp3Buffer = encode(this.buffer);
                var blob = new Blob(mp3Buffer, { type: 'audio/mp3' });
                var reader = new FileReader();
                    reader.readAsArrayBuffer(blob);
                    reader.onload = function (e) {
                        var buf = new Uint8Array(reader.result);
                        var dataLength = buf.length;
                        that.callback &&  that.callback( config.sampleRate , config.sampleBits,dataLength,buf);
                }     
            }
                
        };
 
        //开始录音
        this.start = function () {
            audioInput.connect(recorder);
            recorder.connect(context.destination);
        }
 
        //停止
        this.stop = function () {
 
            recorder.disconnect();
        }
 
        //音频采集
        recorder.onaudioprocess = function (e) {
            audioData.input(e.inputBuffer.getChannelData(0));
            //record(e.inputBuffer.getChannelData(0));
        }
 
    };
    //抛出异常
    HZRecorder.throwError = function (message) {
        alert(message);
        // throw new function () { this.toString = function () { return message; } }
    }
    //是否支持录音
    HZRecorder.canRecording = (navigator.getUserMedia != null);
    //获取录音机
    HZRecorder.get = function (callback, config) {
        if (callback) {
            if (navigator.getUserMedia) {
                navigator.getUserMedia(
                    { audio: true , audio:true } //只启用音频
                    , function (stream) {
                        var rec = new HZRecorder(stream, config);
                        callback(rec);
                    }
                    , function (error) {
                        switch (error.code || error.name) {
                            case 'PERMISSION_DENIED':
                            case 'PermissionDeniedError':
                                HZRecorder.throwError('用户拒绝提供信息。');
                                break;
                            case 'NOT_SUPPORTED_ERROR':
                            case 'NotSupportedError':
                                HZRecorder.throwError('浏览器不支持硬件设备。');
                                break;
                            case 'MANDATORY_UNSATISFIED_ERROR':
                            case 'MandatoryUnsatisfiedError':
                                HZRecorder.throwError('无法发现指定的硬件设备。');
                                break;
                            case 8:
                                HZRecorder.throwError('没有检测到录音设备,无法录音。');
                                break;
                            default:
                                HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
                                break;
                        }
                    });
            } else {
                HZRecorder.throwError('当前浏览器不支持录音功能。'); return;
            }
        }
    }
 
    // 判断端字节序
    HZRecorder.littleEdian = (function() {
        var buffer = new ArrayBuffer(2);
        new DataView(buffer).setInt16(0, 256, true);
        return new Int16Array(buffer)[0] === 256 ? 1 : 0;
    })();

    window.HZRecorder = HZRecorder;
 
})(window);

 

        var myRecorder = null;
        var sn = 0;
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");
        var mapType = utils.getParameterByName("maptype");
        var devName =utils.getParameterByName("name");
        var activeSafety =utils.getParameterByName("activesafety");
        var playerStates = {};
        var audioPlayer = null;
        var audioPlayerTime = 0;
     

        HZRecorder.get(
            function (rec) {myRecorder = rec;},
            {
                sampleRate :44100,
                sampleBits:128,
                callback:function(sampleRate,sampleBits,dataLength,bytes){
                    sn++;
                    var url = myUrls.uploadAudio();
                    var data = {
                            deviceid: deviceid,
                            codec:'mp3',
                            datasize:dataLength,
                            samplebits:32,
                            littleedian:HZRecorder.littleEdian,
                            channel:vRoot.audiochannel,
                            sn:sn,
                            // data:arrayBufferToBase64(buf),
                            hexdata:utils.Bytes2HexStr(bytes),
                            numberofchannels:1,
                            samplerate:sampleRate,
                        };
                        sn++;
                        utils.sendAjax(url,data,function (resp) { 
                            console.log('resp', resp);
                        })
                }
            });
        var vRoot = new Vue({
            el:"#container",
            data:{
                activeSafety: activeSafety == '1' ? true : false,
                activeSafetyStr: '主动安全',
                brightness:128, //1     亮度
                constract:0,    // 2      对比度
                hue:0,         //         色度                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                saturate:128,   // 4       饱和度                                                                                  
                exposure:128,   // 5 
                audioPlayerTip:'对讲请先点击以下按钮',
                isLuyin:false,
                speechTimer:null,
                imgSrc:'./images/luyin/ic_record_ripple@2x-9.png',
                isOpenJianting:false,
                tipModal:false,
                modalHader:'视频参数',
                viewSize:2,  // 1 1:1  2
                activeMenuItem:'video',
                videoContentWH:{
                    width:0,
                    height:0
                },
                devInfo:'',
                videoProperty:{},
                setupModal:false,
                videoPropertyModal:false,
                isFullScreen:false,
                videoNumber:4,
                videoIns:{}, // videojs 实例
                Spin:false,
                allPlayUrls:[],
                videoTimes:{},

                // 音视频参数设置
                realtimebitratemode:'',
                storebitratemode:'',
                realtimeresolution:'',
                storeresolution:'',
                realtimekeyframeinterval:'',
                storekeyframeinterval:'',
                realtimeframerate:'',
                storeframerate:'',
                realtimeframebitrate:'',
                storeframebitrate:'',
                videoCheckboxGroup:[],
                usingaudio:'',

                // 视频播放参数
                videotranstype:'',
                videostreamtype:'',
                audiochannel:'',

                // channelnum
                channelsData:[],

                //云台
                isShowYunTai:false,
                listingChoice:'duijiang',
                
                loading:false,
                columns:[
                    {
                        key:'physicalchannel',
                        title:'物理通道号',
                    },
                    {
                        key:'logicalchannel',
                        title:'逻辑通道号',
                    },
                    {
                        key:'channeltype',
                        title:'通道类型',
                        render:function(h,params){
                            var channeltype = params.row.channeltype ,type;
                            if(channeltype === 0){
                                type = '音视频'
                            }else if(channeltype === 1){
                                type = '音频'
                            }else if(channeltype === 2){
                                type = '视频'
                            }
                            return h('span',{}, type); 
                        }
                    },
                    {
                        key:'connectptz',
                        title:'是否连接云台',
                        render:function(h,params){
                            var connectptz = params.row.connectptz;
                            return h('span',{},connectptz === 0?'未连接':'已连接'); 
                        }
                    },
                ],
                tableData:[],
                safetyDeviceAdas:{},
                safetyDeviceDsm:{},
                safetyDeviceTpms:{},
                safetyDeviceBsd:{},
            },
            methods: {  
                onClickTipBtn:function(){
                
                    var aElement = document.createElement('a');
                    aElement.setAttribute('href','http://www.adobe.com/go/getflashplayer');
                    aElement.click(); 
                    this.tipModal = false;
                }, 
                queryActiveSafetyDeviceInfo:function(exdevicename){
                    var url = myUrls.queryActiveSafetyDeviceInfo() , me = this;
                    var data = {
                        deviceid:deviceid,
                        exdevicename:exdevicename,
                        action:'info'
                    };
                    me.Spin = true;
                    utils.sendAjax(url,data,function (resp) { 
                        console.log('resp', resp);
                        me.Spin = false;
                        var status = resp.status;
                        if(status == CMD_SEND_RESULT_UNCONFIRM){
                            me.$Message.error('发送成功，未收到确认'); 
                        }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                            me.$Message.error('密码错误');
                        }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                            me.$Message.error("设备离线，未缓存");   
                        }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                            me.$Message.error("设备离线，已缓存");
                        }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                            me.$Message.error("需要修改默认密码");
                        }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                            me.$Message.error("错误:" + resp.cause);
                        }else if(status === CMD_SEND_CONFIRMED){
                            switch(exdevicename){
                                case 'adas':
                                    me.safetyDeviceAdas = resp;
                                    break; 
                                case  'dsm':
                                    me.safetyDeviceDsm = resp;
                                    break; 
                                case  'tpms':
                                    me.safetyDeviceTpms = resp;
                                    break; 
                                case  'bsd':
                                    me.safetyDeviceBsd = resp;
                                    break;
                                default :
                                console.log('tag', '');                                     
                            }
                        }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                            me.$Message.error("尝试发送3次失败");
                        }else if(status === CMD_SEND_SYNC_TIMEOUT){
                            me.$Message.error("发送超时");
                        }
                    })
                },
                defaultQualityParams:function(){
                    var me = this;
                    me.brightness = 128;
                    me.constract = 0;
                    me.hue = 0;
                    me.saturate = 128;                                                                         
                    me.exposure = 128;
                },
                sendPaneColorControl:utils.debounce(function(vm){
                    var url = myUrls.setImageQuality(),
                       data = {
                        deviceid:deviceid,
                        channel:2,
                        brightness:vm.brightness,
                        constract:vm.constract,
                        hue:vm.hue, 
                        saturate:vm.saturate,                                                                               
                        exposure:vm.exposure
                       };
                    utils.sendAjax(url,data,function (resp) { 
                        console.log('resp', resp);
                    });
                },300),
                onMousedown:function(){
                    var that = this;
                    if(!that.isOpenJianting){
                        that.$Message.success("请先开启监听");
                        return;
                    }
                   try {
                        that.isLuyin = true;
                        that.setSpeechTimer();
                        myRecorder.start();
                        document.onmouseup = function () {
                            that.isLuyin = false;
                            myRecorder.stop();
                            document.onmousemove = null;
                            document.onmouseup = null;
                            clearTimeout(that.speechTimer);
                            setTimeout(function () { sn = 1; },1000);
                        };
                   } catch (error) {
                       vRoot.$Message.error('浏览器不支持录音功能')
                   }
                    return false;    
                },
                openDuijiang:function(){
                    var  me = this;
                    if(this.isOpenJianting){
                        this.isOpenJianting = false;
                        audioPlayer.pause();
                        audioPlayerTime = 0;
                        me.$Message.success("关闭成功");
                        me.audioPlayerTip = '监听已关闭';
                        var url = myUrls.stopAudio();
                        utils.sendAjax(url,{  deviceid:deviceid, channel:Number(this.audiochannel),},function () {});
                    }else{
                        this.loading = true;
                       
                        var url = myUrls.startAudio() ;
                        var data = {
                            deviceid:deviceid,
                            channel:Number(this.audiochannel),
                            datatype:2
                        }
                        utils.sendAjax(url,data,function (resp) {
                            me.loading = false;  
                            if(resp.status === 6){
                                me.isOpenJianting = true;
                                me.$Message.success("开启成功");
                                audioPlayerTime = Date.now();
                                audioPlayer.src(resp.record.playurl);
                                audioPlayer.play();
                                me.audioPlayerTip = '监听已打开，请按住说话'
                            }else{
                                me.$Message.success("开启失败,超时或者设备不在线");
                            }
                        });
                    }
                    
                },
                queryVideoChannels:function(){
                    var url = myUrls.queryAudioVideoChannels(), me = this;
                    me.loading = true;
                    utils.sendAjax(url,{deviceid:deviceid},function (resp) { 
                        me.loading = false;
                        var status = resp.status;
                        if(status == CMD_SEND_RESULT_UNCONFIRM){
                            me.$Message.error('发送成功，未收到确认'); 
                        }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                            me.$Message.error('密码错误');
                        }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                            me.$Message.error("设备离线，未缓存");   
                        }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                            me.$Message.error("设备离线，已缓存");
                        }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                            me.$Message.error("需要修改默认密码");
                        }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                            me.$Message.error("错误:" + resp.cause);
                        }else if(status === CMD_SEND_CONFIRMED){
                            me.tableData = resp.uniaudiovideochannels.channels;    
                        }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                            me.$Message.error("尝试发送3次失败");
                        }else if(status === CMD_SEND_SYNC_TIMEOUT){
                            me.$Message.error("发送超时");
                        }
                    });
                },
                videoBack:function(){
                    window.open('videoback.html?deviceid='+deviceid +'&token=' + token);
                },
                videoDsm:function(){
                    window.open('activesafety.html?deviceid='+deviceid +'&token=' + token+"&maptype="+mapType);
                },
                handlePlayAllVideos:function(){

                    for(var i = 0 ; i < this.videoNumber; i++){
                        var player = this.videoIns[i];
                        if(!player.pause()){
                            player.play();
                        }
                    }

                },

                handleScreenSize:function(type){
                    if(this.viewSize == type) return ;
                    this.viewSize = type;
                    var aspectRatio = '';
                    switch(type){
                        case 1 :
                            aspectRatio = '1:1';
                            break; 
                        case 2 :
                            aspectRatio = '4:3';
                            break; 
                        case 3 :
                            aspectRatio = '16:9';
                            break; 
                    }
                    for(var key in this.videoIns){
                        var player = this.videoIns[key];
                        player.aspectRatio(aspectRatio);
                    }
                },
                queryClientParameters:function(){
                    this.Spin = true;
                    var url = myUrls.queryClientParameters() , me = this;
                    utils.sendAjax(url,{deviceid:deviceid},function (data) { 
                        var status = data.status ;
                        var audiovideoparameters = data.audiovideoparameters;
                        me.Spin = false;    
                        if(status == CMD_SEND_RESULT_UNCONFIRM){
                            me.$Message.error('发送成功，未收到确认'); 
                        }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                            me.$Message.error('密码错误');
                        }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                            me.$Message.error("设备离线，未缓存");   
                        }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                            me.$Message.error("设备离线，已缓存");
                        }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                            me.$Message.error("需要修改默认密码");
                        }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                            me.$Message.error("错误:" + resp.cause);
                        }else if(status === CMD_SEND_CONFIRMED){
                            me.$Message.success("查询成功!");
                            var videoCheckboxGroup = [];
                            me.realtimebitratemode = audiovideoparameters.realtimebitratemode +''; 
                            me.storebitratemode = audiovideoparameters.storebitratemode+'';
                            me.realtimeresolution = audiovideoparameters.realtimeresolution+'';
                            me.storeresolution = audiovideoparameters.storeresolution+'';
                            me.realtimekeyframeinterval = audiovideoparameters.realtimekeyframeinterval;
                            me.storekeyframeinterval = audiovideoparameters.storekeyframeinterval;
                            me.realtimeframerate = audiovideoparameters.realtimeframerate;
                            me.storeframerate = audiovideoparameters.storeframerate;
                            me.realtimeframebitrate = audiovideoparameters.realtimeframebitrate;
                            me.storeframebitrate = audiovideoparameters.storeframebitrate;
                            me.usingaudio = audiovideoparameters.usingaudio+'';
                            audiovideoparameters.carnum ? videoCheckboxGroup.push('carnum') : null;
                            audiovideoparameters.channel ? videoCheckboxGroup.push('channel') : null;
                            audiovideoparameters.dateandtime ? videoCheckboxGroup.push('dateandtime') : null;
                            audiovideoparameters.drivingtime ? videoCheckboxGroup.push('drivingtime') : null;
                            audiovideoparameters.gpsspeed ? videoCheckboxGroup.push('gpsspeed') : null;
                            audiovideoparameters.latlon ? videoCheckboxGroup.push('latlon') : null;
                            audiovideoparameters.recorderspeed ? videoCheckboxGroup.push('recorderspeed') : null;
                            me.videoCheckboxGroup = videoCheckboxGroup;

                        }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                            me.$Message.error("尝试发送3次失败");
                        }else if(status === CMD_SEND_SYNC_TIMEOUT){
                            me.$Message.error("发送超时");
                        }
                    });
                },
                setClientParameters:function () { 
                    var parameters = {};
                    if(
                        this.realtimebitratemode &&
                        this.storebitratemode &&
                        this.realtimeresolution &&
                        this.storeresolution &&
                        this.realtimekeyframeinterval &&
                        this.storekeyframeinterval &&
                        this.realtimeframerate &&
                        this.realtimeframebitrate &&
                        this.storeframebitrate &&
                        this.usingaudio !== '' 
                    ){
                    
                        parameters.realtimebitratemode = Number(this.realtimebitratemode);
                        parameters.storebitratemode = Number(this.storebitratemode);
                        parameters.realtimeresolution = Number(this.realtimeresolution);
                        parameters.storeresolution = Number(this.storeresolution);
                        parameters.realtimekeyframeinterval = this.realtimekeyframeinterval;
                        parameters.storekeyframeinterval = this.storekeyframeinterval;
                        parameters.realtimeframerate = this.realtimeframerate;
                        parameters.realtimeframebitrate = this.realtimeframebitrate;
                        parameters.storeframebitrate = this.storeframebitrate;
                        parameters.usingaudio = Number(this.usingaudio);

                        var options = ['dateandtime','carnum','channel','latlon','recorderspeed','gpsspeed','drivingtime'];
                        var videoCheckboxGroup = this.videoCheckboxGroup;
                        var url = myUrls.setAudioVideoParameters_Sync() , me = this;
                        options.forEach(function (item) { 
                            if(videoCheckboxGroup.indexOf(item)!=-1){
                                parameters[item] = true;
                            }else{
                                parameters[item] = false;
                            }  
                        })
                        parameters.deviceid = deviceid;
                        me.Spin = true;
                        utils.sendAjax(url,parameters,function (resp) { 
                            var status = resp.status;
                            me.Spin = false;
                            if(status == CMD_SEND_RESULT_UNCONFIRM){
                                me.$Message.error('发送成功，未收到确认'); 
                            }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                                me.$Message.error('密码错误');
                            }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                                me.$Message.error("设备离线，未缓存");   
                            }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                                me.$Message.error("设备离线，已缓存");
                            }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                                me.$Message.error("需要修改默认密码");
                            }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                                me.$Message.error("错误:" + resp.cause);
                            }else if(status === CMD_SEND_CONFIRMED){
                                me.$Message.success("发送成功");
                            }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                                me.$Message.error("尝试发送3次失败");
                            }else if(status === CMD_SEND_SYNC_TIMEOUT){
                                me.$Message.error("发送超时");
                            }
                        })
                    }else{
                        this.$Message.error("请填写全部参数")
                    }
                    
                },
                queryVideoProperty:function(){
                    this.Spin = true;
                    var url = myUrls.queryVideoProperty(), that = this;
                    utils.sendAjax(url,{deviceid:deviceid},function (data) { 
                        var status = data.status ;
                        if(status == CMD_SEND_RESULT_UNCONFIRM){
                            that.$Message.error('发送成功，未收到确认'); 
                        }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                            that.$Message.error('密码错误');
                        }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                            that.$Message.error("设备离线，未缓存");   
                        }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                            that.$Message.error("设备离线，已缓存");
                        }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                            that.$Message.error("需要修改默认密码");
                        }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                            that.$Message.error("错误:" + resp.cause);
                        }else if(status === CMD_SEND_CONFIRMED){
                            var audiosamplebits = data.audiosamplebits;
                            that.$Message.success("查询成功");  
                            switch(audiosamplebits){
                                case 0:
                                    data.audiosamplebits = '8 kHz';
                                    break;
                                case 1:
                                    data.audiosamplebits = '22.05 kHz';
                                    break;
                                case 2:
                                    data.audiosamplebits = '44.1 kHz';
                                    break;
                                case 3:
                                    data.audiosamplebits = '48 kHz';
                                    break;
                            }   
                            that.videoProperty = data;
                            that.videoPropertyModal = true;
                        }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                            that.$Message.error("尝试发送3次失败");
                        }else if(status === CMD_SEND_SYNC_TIMEOUT){
                            that.$Message.error("发送超时");
                        }
                        that.Spin = false;
                    })
                },
             
                handleStopAllVideos:function(){
                    var url = myUrls.stopVideos() , me = this;
                    utils.sendAjax(url,{deviceid:deviceid, channels:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]},function (resp) {
                        var records = resp.records , status = resp.status ;
                        me.$Message.success("停止全部成功");
                    })
                    this.videoTimes = {};
                    for(var key in this.videoIns){
                        var player = this.videoIns[key];
                        if(!player.paused())
                        {
                        	var src = player.src();
                            player.dispose();
                            var wrapper = document.getElementById('videoContent').children[key];  
                            var videoEl = document.createElement('video');
                            videoEl.setAttribute( 'id' , 'video' + key );
                            videoEl.setAttribute( 'controls' , 'true' );
                            videoEl.setAttribute( 'poster' , '');
                            videoEl.className ="video-js";
                            wrapper.appendChild(videoEl);
                            this.initVideo(key,false);
                            this.videoIns[key].src(src);
                        }
                    };

                },
                handleStartVideos:function(index){
                    var url = myUrls.startVideos() , me = this;
                    utils.sendAjax(url,{deviceid:deviceid, channels:[Number(index)+1]},function (resp) {
                        var records = resp.records , status = resp.status ;
                        var player = me.videoIns[index];
                        var isNeedRecreate = true;
                        console.log('index',index);
                        if(status == CMD_SEND_RESULT_UNCONFIRM){

                            me.$Message.error('发送成功，未收到确认'); 
                        }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){

                            me.$Message.error('密码错误');
                        }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){

                            me.$Message.error("设备离线，未缓存");   
                        }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
             
                            me.$Message.error("设备离线，已缓存");
                        }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                         
                            me.$Message.error("需要修改默认密码");
                        }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                            
                            me.$Message.error("错误:" + resp.cause);
                        }else if(status === CMD_SEND_CONFIRMED){
                            var acc = resp.acc 
                            isNeedRecreate = false;
                            var oldSrc = player.src();
                            var newSrc = records[0].playurl;
                            // var newSrc = 'rtmp://58.200.131.2:1935/livetv/hunantv';
                            if(!playerStates[index]){
                                var accState = '';
                                if(acc === 3){
                                    accState = 'ACC开,'
                                }else if(acc === 2 ){
                                    accState = 'ACC关,'
                                }
                                me.$Message.success(accState + "请求播放成功,请稍后...");
                            };
          
                            if(oldSrc !== newSrc)
                            {
                                player.src(newSrc);
                            }
                            player.play();
                          
                        }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                          
                            me.$Message.error("尝试发送3次失败");
                        }else if(status === CMD_SEND_SYNC_TIMEOUT){
                            var acc = resp.acc 
                            isNeedRecreate = false;
                            var oldSrc = player.src();
                            var newSrc = records[0].playurl;
                            // var newSrc = 'rtmp://58.200.131.2:1935/livetv/hunantv';
                            if(!playerStates[index]){
                                var accState = '';
                                if(acc === 3){
                                    accState = 'ACC开,'
                                }else if(acc === 2 ){
                                    accState = 'ACC关,'
                                }
                                me.$Message.error(accState + "请求播放超时");
                            };
          
                            if(oldSrc !== newSrc)
                            {
                                player.src(newSrc);
                            }
                            player.play();
                        }

                        if(isNeedRecreate)
                        {
                            if(!player.paused())
                            {
                            var src = player.src();
                            delete me.videoTimes["videoPlayer"+index];
                            player.dispose();

                            var wrapper = document.getElementById('videoContent').children[index];  
                            var videoEl = document.createElement('video');
                            videoEl.setAttribute( 'id' , 'video' + index );
                            videoEl.setAttribute( 'controls' , 'true' );
                            videoEl.setAttribute( 'poster' , '');
                            videoEl.className ="video-js";
                            wrapper.appendChild(videoEl);
                            me.initVideo(index,false);
                            me.videoIns[index].src(src);
                            }
                        }
                    })
                },
                handleStopVideos:function(index){
                    var url = myUrls.stopVideos() , me = this;
                    utils.sendAjax(url,{deviceid:deviceid, channels:[Number(index)+1],videoclosetype:0},function (resp) {
                        if(resp.status === 0){
                            // me.$Message.success("停止成功")
                            // me.videoIns.forEach(function (item) {
                            //     item.pause();
                            // });
                        }else if(status === 1){

                        }else if(status === 2){
                            me.$Message.error("设备不在线");   
                        }else if(status === 3){
        
                        }else if(status === 4){

                        }else if(status === 5){
                            me.$Message.error("错误:" + resp.cause);
                        }
                    })
                },
                handleFullScreen:function(){
                    var main = this.$refs.videoContent;
                    if (this.isFullScreen) {
                        if (document.exitFullscreen) {
                        document.exitFullscreen()
                        } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                        } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                        } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                        }
                    } else {
                        if (main.requestFullscreen) {
                        main.requestFullscreen()
                        } else if (main.mozRequestFullScreen) {
                        main.mozRequestFullScreen()
                        } else if (main.webkitRequestFullScreen) {
                        main.webkitRequestFullScreen()
                        } else if (main.msRequestFullscreen) {
                        main.msRequestFullscreen()
                        }
                    }
                    this.isFullScreen = false;
                },
                displayAndHideVideos:function(toOpensIndex){
                    var wrapper = document.getElementById('videoContent').children;  
                    for(var i = 0 ; i < 16 ;i++){
                        var player =this.videoIns[i];
                        if(i < toOpensIndex)
                        {
                            // if(player.paused())
                            // {
                            //     player.play();
                            // }
                            // wrapper[i].style.display = 'block';
                        }
                        else
                        {
                            player && player.pause();
                            // wrapper[i].style.display = 'none';
                        }                         
                    }
                },
                openAndCloseVideoWindows:function(toOpensIndex){

                    this.videoNumber = toOpensIndex;
                    document.getElementById('videoContent').className = 'videoContent-' + this.videoNumber;     

                    for(var i = 0 ; i < toOpensIndex; i++){
                        var player = this.videoIns[i];
                        if(player){
                            var wrapper = document.getElementById('videoContent').children[i]; 
                            player.height($(wrapper).height());
                            player.width($(wrapper).width());
                        }else{
                            this.initVideo(i,true);
                            player = this.videoIns[i];
                        }
                        !player.src() && player.src(this.allPlayUrls[i].playurl);
                        
                    }

              
                },
                createVideoElement:function(index){
                    var div = document.createElement('div');
                    var videoEl = document.createElement('video');
                        videoEl.setAttribute( 'id' , 'video' + index );
                        videoEl.setAttribute( 'controls' , 'true' );
                        videoEl.setAttribute( 'poster' , '');
                        videoEl.className ="video-js";
                        div.appendChild(videoEl);
                        document.getElementById('videoContent').appendChild(div);
                        var wrapper = document.getElementById('videoContent').children[index]; 
                },
                initVideo:function(index,isCreate){
                        index = Number(index);
                        var self = this;
                        isCreate && this.createVideoElement(index);
                        var wrapper = document.getElementById('videoContent').children[index]; 

                        var player = videojs('video'+index , {
                            poster:"./images/tv_default.jpg",
                            autoplay: false ,
                            preload:"none",
                            // aspectRatio:'4:3',
                            height:$(wrapper).height(),
                            width:$(wrapper).width(),
                            controlBar: {
                                remainingTimeDisplay:false,
                                progressControl: false,
                                liveDisplay: true,
                            },
                            
                            techOrder: ['html5','flash'],
                            sources: [
                                    // { 
                                        // src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
                                        // src:this.allPlayUrls[index].playurl,
                                        // type: 'rtmp/flv'
                                    // }
                                ],
                        },function(){

                            var tipEl = document.createElement('div');
                                tipEl.setAttribute('id','video-tip'+index);
                                tipEl.style.lineHeight = '30px';
                                tipEl.style.paddingLeft = '15px';
                           
                             var vjsControlBar = null;

                            (function poll() {
                                if(vjsControlBar){
                                    vjsControlBar.appendChild(tipEl)
                                }else{
                                    vjsControlBar = document.getElementsByClassName('vjs-control-bar')[index+1];
                                    setTimeout(poll,100)
                                }
                            })();
                            
                            var bigPlayButton = document.getElementsByClassName('vjs-big-play-button')[index+1];

                             (function poll1() {
                                 console.log('bigPlayButton', bigPlayButton,index+1);
                                if(bigPlayButton){
                                    bigPlayButton = document.getElementsByClassName('vjs-big-play-button')[index+1];
                                }else{
                                    setTimeout(poll1,100)
                                }
                            })();
                     
          
                            this.on('play',function () { 
                                tipEl.innerText = '正在请求播放';
                                bigPlayButton && (bigPlayButton.style.display = 'none');
                                self.handleStartVideos(index);
                                self.videoTimes['videoPlayer'+(index)] = Date.now();
                            });
                            this.on('pause',function () { 
                                bigPlayButton && (bigPlayButton.style.display = 'block');
                                self.handleStopVideos(index);
                                delete self.videoTimes['videoPlayer'+(index)];
                                delete playerStates[index];
                            });
                            // this.src(self.allPlayUrls[index].playurl);
                            // console.log('type', this.type)
                            //------events    绑定事件用on    移除事件用off
                            this.on('loadstart',function () {
                                // playerStates[index] = "loadstart";
                                tipEl.innerText = '开始加载';
                            });
                            this.on('loadedmetadata',function () {
                                // playerStates[index] = "loadedmetadata";
                                tipEl.innerText = '视频源数据加载完成';
                            });
                            this.on('loadeddata',function () {
                                playerStates[index] = "loadeddata";
                                tipEl.innerText = '渲染播放画面';
                            });
                            this.on('progress',function () {
                                tipEl.innerText = '加载中...';
                            });
                            this.on('timeupdate',function () {});
                        });

                        this.videoIns[index] = player;
                },
                initApp:function(){
                    var videoContent = this.$refs.videoContent;
                    this.videoContentWH = videoContent.getBoundingClientRect();
                    for(var i = 0 ; i < this.videoNumber ; i++){
                        this.initVideo(i,true);
                    }

                },
                queryVideosPlayUrl:function(callback){
                    var url = myUrls.queryVideosPlayUrl() ,me = this;
                    utils.sendAjax(url,{deviceid:deviceid},function (data) { 
                        if(data.status === 0){
                            me.allPlayUrls = data.records;
                            me.allPlayUrls.forEach(function (item,index) { 
                                if(index<me.videoNumber){
                                    me.videoIns[index].src(item.playurl);    
                                }
                            })
                            callback(data)
                        }else if(data.status === 3){

                        }
                    });
                },
                stopVideoPlayer:function(){
                    var videoIns = this.videoIns;
                    for(var i in videoIns){
                        var key = 'videoPlayer'+i;
                        var nowTime = Date.now();
                        var oldTime = this.videoTimes[key];
                        if(oldTime){
                            if((nowTime - oldTime) > 1000*60*3){
                                var player = videoIns[i];
                                player.pause();
                                delete this.videoTimes[key];
                                document.getElementById('video-tip'+i).innerText = '单次播放时间限制已到，暂停播放';
                            }
                        }
                    }
                },
                setSpeechTimer:function () {
                    let index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    let num = index.length , that = this; 
                    this.speechTimer = setInterval(function () {
                    setTimeout(function () {
                        num++;
                        that.imgSrc = "./images/luyin/ic_record_ripple@2x-" + index[num]+".png";
                    }, 70);
                    if (num >= index.length - 1) {
                        num = 0;
                    }
                    }, 70);
                },
                checkVideoPlayerTime:function(){
                    var me = this;
                    this.myInterval = setInterval(function(){
                        me.stopVideoPlayer();
                        if(audioPlayerTime !== 0 ){
                            if((Date.now() - audioPlayerTime) > 1000*60*3){
                                audioPlayer.pause();
                                me.isOpenJianting = false;
                                me.audioPlayerTip = '3分钟播放时间到,已关闭';
                                audioPlayerTime = 0;
                            }
                        }
                    },5000);
                },
                queryDeviceById:function(){
                    var url = myUrls.queryDeviceById() , that = this;
                    utils.sendAjax(url,{deviceid:deviceid},function (data) { 
                        if(data.status == 0){
                         
                            that.videotranstype = data.device.videotranstype + '';
                            that.videostreamtype = data.device.videostreamtype + '';
                            that.audiochannel = data.device.audiochannel;
                        }else{}
                    })
                },
                handleSetPlayParamter:function(){
                    var url = myUrls.setVideoPlayParameters() , that = this;
                   if(!(typeof Number(this.audiochannel) === 'number' && !isNaN(this.audiochannel))){
                        that.$Message.error('通道号必须是1到99的数字')
                       return;
                   }

                        var data = {
                            deviceid:deviceid,
                            audiochannel:Number(this.audiochannel),
                            videotranstype:Number(this.videotranstype),
                            videostreamtype:Number(this.videostreamtype),
                        }

                        utils.sendAjax(url,data,function (data) { 

                            if(data.status === 0){
                                that.$Message.success('设置成功')
                            }else{
                                that.$Message.error('设置失败')
                            }

                        })

                    
                },
                initAudioPlayer:function(){
                    var videoEl = document.createElement('video');
                        videoEl.setAttribute( 'id' , 'audio1');
                        videoEl.setAttribute( 'controls' , 'true' );
                        videoEl.setAttribute( 'poster' , '');
                        videoEl.className ="video-js";
                        document.getElementById('audio-wrap').appendChild(videoEl);    

                      audioPlayer = videojs('audio1', {
                            poster:"./images/tv_default.jpg",
                            autoplay: false ,
                            preload:"none",
                            controls:false,
                            controlBar: {
                                remainingTimeDisplay:false,
                                progressControl: false,
                                liveDisplay: true,
                            },
                            techOrder: ['html5','flash'],
                            sources: [
                                    // { 
                                        // src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
                                        // src:this.allPlayUrls[index].playurl,
                                        // type: 'rtmp/flv'
                                    // }
                                ],
                        },function(){
                            document.getElementsByClassName('vjs-loading-spinner')[0].style.display = 'none';
                            this.on('play',function () { 
                               
                            });
                            this.on('pause',function () { 
                              
                
                            });
                            // this.src(self.allPlayUrls[index].playurl);
                            // console.log('type', this.type)
                            //------events    绑定事件用on    移除事件用off
                            this.on('loadstart',function () {
                                // playerStates[index] = "loadstart";
                        
                            });
                            this.on('loadedmetadata',function () {
                                // playerStates[index] = "loadedmetadata";
                          
                            });
                            this.on('loadeddata',function () {
                            
                            });
                            this.on('progress',function () {
                             
                            });
                        });

                },
                querySingleAudioVideoParameters:function(){
                    this.Spin = true;
                    var url = myUrls.querySingleAudioVideoParameters() , me = this;
                    utils.sendAjax(url,{deviceid:deviceid},function (data) { 
                        me.Spin = false;
                        if(data.status === 6){

                          
                            var audiovideoparameters = data.audiovideoparameters;
                            var channelsData = [];
                            audiovideoparameters.forEach(function (item,index) { 
                                var dataInfo = {
                                    channelnum:'通道'+(++index),
                                };
                                var videoCheckboxGroup = [];
                                dataInfo.realtimebitratemode = item.realtimebitratemode +''; 
                                dataInfo.storebitratemode = item.storebitratemode+'';
                                dataInfo.realtimeresolution = item.realtimeresolution+'';
                                dataInfo.storeresolution = item.storeresolution+'';
                                dataInfo.realtimekeyframeinterval = item.realtimekeyframeinterval;
                                dataInfo.storekeyframeinterval = item.storekeyframeinterval;
                                dataInfo.realtimeframerate = item.realtimeframerate;
                                dataInfo.storeframerate = item.storeframerate;
                                dataInfo.realtimeframebitrate = item.realtimeframebitrate;
                                dataInfo.storeframebitrate = item.storeframebitrate;
    
                                item.carnum ? videoCheckboxGroup.push('carnum') : null;
                                item.channel ? videoCheckboxGroup.push('channel') : null;
                                item.dateandtime ? videoCheckboxGroup.push('dateandtime') : null;
                                item.drivingtime ? videoCheckboxGroup.push('drivingtime') : null;
                                item.gpsspeed ? videoCheckboxGroup.push('gpsspeed') : null;
                                item.latlon ? videoCheckboxGroup.push('latlon') : null;
                                item.recorderspeed ? videoCheckboxGroup.push('recorderspeed') : null;
                                dataInfo.videoCheckboxGroup = videoCheckboxGroup;
                                channelsData.push(dataInfo);
                            });
                            me.channelsData = channelsData;

                        }else{
                            me.$Message.error("查询失败");
                        }
                    });
                },
                setSingleAudioVideoParameters:function(index){
                    var originalData = this.channelsData[index];
                    var parameters = {};
                    if(
                        originalData.realtimebitratemode &&
                        originalData.storebitratemode &&
                        originalData.realtimeresolution &&
                        originalData.storeresolution &&
                        originalData.realtimekeyframeinterval &&
                        originalData.storekeyframeinterval &&
                        originalData.realtimeframerate &&
                        originalData.realtimeframebitrate &&
                        originalData.storeframebitrate 
                    ){
                        parameters.realtimebitratemode = Number(originalData.realtimebitratemode);
                        parameters.storebitratemode = Number(originalData.storebitratemode);
                        parameters.realtimeresolution = Number(originalData.realtimeresolution);
                        parameters.storeresolution = Number(originalData.storeresolution);
                        parameters.realtimekeyframeinterval = originalData.realtimekeyframeinterval;
                        parameters.storekeyframeinterval = originalData.storekeyframeinterval;
                        parameters.realtimeframerate = originalData.realtimeframerate;
                        parameters.realtimeframebitrate = originalData.realtimeframebitrate;
                        parameters.storeframebitrate = originalData.storeframebitrate;


                        var options = ['dateandtime','carnum','channel','latlon','recorderspeed','gpsspeed','drivingtime'];
                        var videoCheckboxGroup = originalData.videoCheckboxGroup;
                        var url = myUrls.setSingleAudioVideoParameters() , me = this;
                        options.forEach(function (item) { 
                            if(videoCheckboxGroup.indexOf(item)!=-1){
                                parameters[item] = true;
                            }else{
                                parameters[item] = false;
                            }  
                        })
                        // parameters.deviceid = deviceid;
                        parameters.channelnum = ++index; 
   
                        utils.sendAjax(url,{deviceid:deviceid,parameters:[parameters]},function (data) {  
                            var status = data.status;
                            if(status == CMD_SEND_RESULT_UNCONFIRM){
                                me.$Message.error('发送成功，未收到确认'); 
                            }else if(status === CMD_SEND_RESULT_PASSWORD_ERROR){
                                me.$Message.error('密码错误');
                            }else if(status === CMD_SEND_RESULT_OFFLINE_NOT_CACHE){
                                me.$Message.error("设备离线，未缓存");   
                            }else if(status === CMD_SEND_RESULT_OFFLINE_CACHED){
                                me.$Message.error("设备离线，已缓存");
                            }else if(status === CMD_SEND_RESULT_MODIFY_DEFAULT_PASSWORD){
                                me.$Message.error("需要修改默认密码");
                            }else if(status === CMD_SEND_RESULT_DETAIL_ERROR){
                                me.$Message.error("错误:" + resp.cause);
                            }else if(status === CMD_SEND_CONFIRMED){
                                me.$Message.success("发送成功");
                            }else if(status === CMD_SEND_OVER_RETRY_TIMES){
                                me.$Message.error("尝试发送3次失败");
                            }else if(status === CMD_SEND_SYNC_TIMEOUT){
                                me.$Message.error("发送超时");
                            }
                        })
                    }
                }
            },
            computed:{
               videoContentCls:function(){
                   return {
                    //    'videoContent-1':this.videoNumber === 1,
                    //    'videoContent-4':this.videoNumber === 4,
                    //    'videoContent-6':this.videoNumber === 6,
                    //    'videoContent-8':this.videoNumber === 8,
                    //    'videoContent-9':this.videoNumber === 9,
                    //    'videoContent-16':this.videoNumber === 16,
                    //    'full':true
                   }
               }
            },
            watch: {
                brightness:function () { this.sendPaneColorControl(this);},
                constract:function () { this.sendPaneColorControl(this);},
                hue:function () { this.sendPaneColorControl(this);},
                saturate:function () { this.sendPaneColorControl(this);},                                                                             
                exposure:function () { this.sendPaneColorControl(this);}
            },
            mounted :function() {
                var that = this; 
                // videojs.options.flash.swf = "./videojs/video-js.5.4.2.swf";
                var fls = flashChecker();
                if (!fls.f) {
                    this.tipModal = true;
                }
                this.$nextTick(function(){ 

                    document.getElementById('videoContent').className = 'videoContent-4';
        
                    that.devInfo = '设备序号:' + deviceid + ' 设备名称:' + devName; 
                    
                    that.initApp(); 

                    that.checkVideoPlayerTime();

                    that.queryVideosPlayUrl(function (data) {});
    
                    that.queryDeviceById();
                    
                    that.initAudioPlayer();
                    // that.querySingleAudioVideoParameters();
                    setTimeout(function() {
                        document.getElementById('mask-wrapper').style.display = 'none';
                    }, 1000);

                    window.onresize = function (){
                        for(var i = 0 ; i < that.videoNumber; i++){
                            var player = that.videoIns[i];
                            if(player){
                                var wrapper = document.getElementById('videoContent').children[i]; 
                                !player.src && player.src(that.allPlayUrls[i].playurl);
                                try {
                                    player.height($(wrapper).height());
                                    player.width($(wrapper).width());
                                } catch (error) {
                                    
                                }
                            }
                        }
                    }
                });

            },
        })

        function flashChecker() {
            var hasFlash = 0; //是否安装了flash
            var flashVersion = 0; //flash版本
            if (document.all) {
            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (swf) {
                hasFlash = 1;
                VSwf = swf.GetVariable("$version");
                flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
            }
            } else {
            if (navigator.plugins && navigator.plugins.length > 0) {
                var swf = navigator.plugins["Shockwave Flash"];
                if (swf) {
                hasFlash = 1;
                var words = swf.description.split(" ");
                for (var i = 0; i < words.length; ++i) {
                    if (isNaN(parseInt(words[i]))) continue;
                    flashVersion = parseInt(words[i]);
                }
                }
            }
            }
            return { f: hasFlash, v: flashVersion };
        }
       
    </script>
</body>
</html>